<template>
  <transition>
    <div class="register-wrap">
      <div class="register-container" v-if="!success">
        <login-wrap
          title1="手机号注册"
          title2="邮箱号注册"
          @firstWay="handlePhoneRegister"
          @secondWay="handleEmailRegister"
        >
          <template #mainContent>
            <login-input
              :error-message="accountErrMsg"
              :placeholder="placeholder"
              v-model="account"
              @handleCheck="checkAccount"
              @cancelCheck="accountErrMsg = ''"
              @keyup.enter.native="handleRegisterEnter"
            ></login-input>
            <login-input
              :error-message="passwordErrMsg"
              placeholder="请输入密码"
              input-type="2"
              :type="type"
              v-model="password"
              @handleCheck="checkPassword"
              @cancelCheck="passwordErrMsg = ''"
              @keyup.enter.native="handleRegisterEnter"
              @handleShowPassword="handleShowPassword"
            ></login-input>
            <login-input
              :error-message="verifyErrMsg"
              :isCount="isCount"
              placeholder="请输入验证码"
              input-type="3"
              v-model="verifyCode"
              v-if="!isEmail"
              @sendSms="checkVerification"
              @cancelCheck="verifyErrMsg = ''"
              @keyup.enter.native="handleRegisterEnter"
            ></login-input>
          </template>
          <template #mainFooter>
            <login-button @handle="handleRegister" button="注册" ref="registerButton"></login-button>
          </template>
        </login-wrap>
      </div>
      <div class="register-success" v-if="success">
        <yun-icon name="success" size="40px" color="#75D098"></yun-icon>
        <p style="color: #75D098;">注册成功</p>
        <p>请查看邮箱收件箱验证账号</p>
        <button>前往验证</button>
      </div>
    </div>
  </transition>
</template>

<script>
import loginWrap from '../../components/pc/loginCard/loginWrap'
import LoginInput from "../../components/pc/loginCard/loginInput";
import LoginButton from "../../components/pc/loginCard/loginButton";
import config from "../../action/config";
import {checkPhone, checkEmail, checkPassword, checkVerification} from './checkfrom';


export default {
  name: "register",
  components: {
    LoginButton,
    LoginInput,
    loginWrap
  },
  data(){
    return {
      type: 'password',     // 显示密码
      success: false,
      account: '',          // 保存 手机号 邮箱
      password: '',         // 保存 密码
      verifyCode: '',       // 保存 验证码
      isEmail: false,     // 判断 邮箱 手机 注册
      placeholder: '请输入手机号',
      accountErrMsg: '',    // 手机号 邮箱 错误提示
      passwordErrMsg: '',   // 密码错误 提示信息
      verifyErrMsg: '',     // 验证码错误 提示信息
      isCount: false        // 是否开始倒计时
    }
  },
  watch: {
    account: function (val) {
      if (val.length > 10) {
        this.checkAccount();
      }
    },
    password: function (val) {
      if (val.length > 7) {
        this.checkPassword();
      }
    }
  },
  methods:{
    // 显示为 手机注册
    handlePhoneRegister() {
      Object.assign(this.$data, this.$options.data());
      this.isEmail = false;
      this.placeholder = '请输入手机号';
    },
    // 显示为 邮箱注册
    handleEmailRegister() {
      Object.assign(this.$data, this.$options.data());
      this.isEmail = true;
      this.placeholder = '请输入邮箱账号';
    },
    // 控制密码显示
    handleShowPassword() {
      this.type = this.type === 'password' ? 'text' : 'password';
    },
    // 检测account 手机 邮箱
    checkAccount() {
      if (this.isEmail) {
        this.accountErrMsg = checkEmail(this.account);
      } else {
        this.accountErrMsg = checkPhone(this.account);
      }
    },
    // 检测 密码
    checkPassword() {
      this.passwordErrMsg = checkPassword(this.password);
    },
    // 检测验证码
    checkVerification() {
      this.isCount = false;
      this.accountErrMsg = checkPhone(this.account);
      if (this.accountErrMsg === '') {
        this.getSms();
        this.verifyErrMsg = '';
        this.isCount = true;
        setTimeout(() => {
          this.isCount = false;
        }, 60000);
      }
    },
    // 发送短信
    async getSms() {
      let smsResponse = await this.$axios.$get(config.api.get.Sms.send, {
        params: {
          mobile: this.account
        }
      });
      if (smsResponse.code === 0) {
        this.$message({
          type: 'success',
          message: '短信发送成功！'
        });
      } else {
        this.verifyErrMsg = smsResponse.msg;
        this.$message({
          type: 'info',
          message: smsResponse.msg
        });
      }
    },
    // 判断是否同意协议
    checkAgreement(isAgreement) {
      if (isAgreement) return true;
      else {
        this.$message({
          type: 'info',
          message: '请同意用户协议和隐私政策'
        })
      }
    },
    handleRegisterEnter() {
      this.$refs.registerButton.handel();
    },
    async handleRegister(isAgree) {
      this.checkAccount();
      this.checkPassword();
      this.verifyErrMsg = checkVerification(this.verifyCode);

      let registerResponse;

      if (!this.isEmail && this.passwordErrMsg === '' && this.accountErrMsg === '' && this.verifyErrMsg === '') {
        if (this.checkAgreement(isAgree)) {
          registerResponse = await this.$axios.$post(config.api.post.User.registerPhone, {
            mobile: this.account,
            password: this.password,
            verifyCode: this.verifyCode
          })
        }
      } else if (this.isEmail && this.passwordErrMsg === '' && this.accountErrMsg === '') {
        if (this.checkAgreement(isAgree)) {
          registerResponse = await this.$axios.$post(config.api.post.User.registerEmail, {
            email: this.account,
            password: this.password
          })
        }
        // 邮箱注册
      }
      console.log(isAgree);
      console.log(registerResponse);

      // 注册成功
      if (registerResponse !== undefined && registerResponse.code === 0) {
        this.$message({
          type:'success',
          message:'注册成功，请登录！'
        })

        if (this.isEmail) {
          this.success = true;
          setTimeout(() => {
            this.$router.push('/users/login');
          }, 2500)
        } else {
          this.$router.push('/users/login');
        }

      } else if(registerResponse !== undefined) {
        this.errMessage = registerResponse.msg;
        // 注册失败
        if (registerResponse.code === 1002) {
          if (this.isEmail) {
            this.accountErrMsg = registerResponse.msg
          } else {
            this.passwordErrMsg = registerResponse.msg;
          }
        } else if (registerResponse.code === 1001) {
          this.accountErrMsg = registerResponse.msg;
        }else if (registerResponse.code === 1003) {
          this.verifyErrMsg = registerResponse.msg;
        } else {
          this.$message({
            type: 'error',
            message: registerResponse.msg
          });
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .register-wrap{
    .register-container{
      width: 514*$length;
      margin: 0 auto;
      padding: 40*$length 0;
    }
    .register-success{
      width: 408*$length;
      height: 298*$length;
      margin: 236*$length auto;
      padding-top: 24*$length;
      background-color: #fff;
      @extend %flex-column-spb;
      justify-content: flex-start;
      @include border-radius(4*$length);
      > p {
        margin-bottom: 25*$length;
        @extend %cursorPointer;
        @include fontStyle(14,19,500,#666,center);
      }
      > button {
        width: 100*$length;
        margin-top: 33*$length;
        background-color: #75D098;
        border: none;
        @include border-radius(4*$length);
        @include fontStyle(14,34,500,#fff,center);
      }
    }
  }
</style>
